<template>
  <el-dialog
    v-model="visible.detail"
    :close-on-click-modal="false"
    title="详情"
    width="80%"
  >
    <div v-loading="loading.detail" class="order_details">
      <!--      <el-button icon="el-icon-close" class="close" @click="close" />-->
      <div class="cotent">
        <div class="left_part">
          <div class="order_info">
            <h2>订单信息</h2>
            <ul>
              <li>
                <p>
                  <span>订单ID:</span>
                  <span>{{ form.orderId }}</span>
                </p>
                <p>
                  <span>支付单号:</span>
                  <span>{{ form.transactionId }}</span>
                </p>
              </li>
              <li>
                <p>
                  <span>订单状态:</span>
                  <span v-if="form.state === 1">待付款</span>
                  <span v-if="form.state === 2">待发货</span>
                  <span v-if="form.state === 3">待收货</span>
                  <span v-if="form.state === 4">已完成</span>
                  <span v-if="form.state === 5">已取消</span>
                </p>
                <p>
                  <span>售后状态:</span>
                  <span>{{ form.afterStateName }}</span>
                </p>
              </li>
              <li>
                <p>
                  <span>支付方式:</span>
                  <span v-if="form.paymentMode === 1">微信</span>
                  <span v-if="form.paymentMode === 2">支付宝</span>
                </p>
                <p>
                  <span>物流方案:</span>
                  <span>{{ form.logisticsName }}</span>
                </p>
              </li>
              <li>
                <p>
                  <span>创建时间:</span>
                  <span>{{ form.createTime }}</span>
                </p>
                <p>
                  <span>支付时间:</span>
                  <span>{{ form.paymentTime }}</span>
                </p>
              </li>
              <li>
                <p>备注:{{ form.remark }}</p>
              </li>
            </ul>
          </div>
          <div class="goods_info">
            <h2>商品信息</h2>
            <div
              v-for="(item, index) in form.products"
              :key="index"
              class="goods_list"
            >
              <div class="good_price">
                <ul>
                  <li>
                    <p>商品总价: ¥{{ form.orderPrice }}</p>
                    <p>支付金额: ¥{{ form.price }}</p>
                  </li>
                  <li>
                    <p>物流费用: ￥{{ form.logisticsPrice }}</p>
                  </li>
                </ul>
              </div>
              <div class="good_details">
                <ul>
                  <li>
                    <img :src="item.image" />
                    <div class="details">
                      <p>{{ item.productName }}</p>
                      <p class="skuDetails">
                        <span
                          v-for="(detailsItem, detailsindex) of item.skuDetails"
                          :key="detailsindex"
                          class="detail_span"
                        >
                          {{ detailsItem.skuName }}: {{ detailsItem.skuValue }}
                        </span>
                      </p>
                      <p>SKU: {{ item.skuId }}</p>
                    </div>
                  </li>
                  <li class="cen">
                    ¥{{ `${item.productPrice} * ${item.number}` }}
                  </li>
                  <li>
                    {{ form.orderPrice }}
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <!-- 未发货时物流信息显示去发货按钮 -->
          <!-- <div class="logistics_info" v-show="form.logisticsName && form.logisticsNum"> -->
          <div class="logistics_info">
            <h2>物流信息</h2>
            <!-- <p
              v-if="!form.logisticsNum"
              class="send_good"
              @click="send"
            >
              去发货
            </p>-->
            <el-button
              v-if="!form.logisticsNum && form.state == 2"
              type="primary"
              class="send_good"
              @click="send"
            >去发货</el-button>
            <div v-else class="logistics_content">
              <p class="logistics_title">
                <span>物流公司: {{ form.express }}</span>
                <span>运单号: {{ form.deliverFormid }}</span>
              </p>
              <!-- <p
                v-for="(item, index) in tracesList"
                :key="index"
                class="logistics_item"
              >
                <span>{{ item.acceptTime }}</span>
                <span>{{ acceptStation }}</span>
              </p> -->
            </div>
          </div>
        </div>
        <div class="right_part">
          <div class="pay_order_info">
            <h2>下单人信息</h2>
            <p>下单账户: {{ form.customerName }}</p>
            <p>历史订单总数: {{ form.total }}个</p>
            <p>下单备注: {{ form.remark }}</p>
          </div>
          <div class="take_goods_info">
            <h2>收货信息</h2>
            <p>姓名: {{ form.receiveName }}</p>
            <p>手机号: {{ form.receivePhone }}</p>
            <p>地址: {{ form.receiveAdress }} {{ form.address }}</p>
          </div>
        </div>
      </div>
      <!-- 发货 -->
      <el-dialog
        v-model="visible.express"
        title="发货"
        append-to-body
        :close-on-click-modal="false"
      >
        <el-form
          ref="sendGoodsFormRef"
          :model="expressForm"
          :rules="expressRules"
          label-width="80px"
        >
          <el-form-item label="快递公司" prop="express">
            <el-select v-model="expressForm.express" filterable>
              <el-option
                v-for="(item, index) in companyList"
                :key="index"
                :label="item.dictName"
                :value="item.dictId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="快递单号" prop="deliverFormid">
            <el-input
              v-model="expressForm.deliverFormid"
              maxlength="20"
              oninput="value = value.replace(/[^\a-\z\A-\Z0-9]/g,'')"
            />
          </el-form-item>
          <!--
          <el-form-item label="快递公司编号" prop="shipperCode" v-if="false">
            <el-input v-model="expressForm.shipperCode" />
          </el-form-item>-->
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="expressConfirm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </el-dialog>
</template>

<script setup>
import { defineComponent, reactive, ref } from 'vue'

import { orderGetById, orderGetSelect, orderDilevery } from '@/api/order'

defineComponent({
  name: 'PendDetails',
})

const emits = defineEmits(['refresh'])

const sendGoodsFormRef = ref(null)
let visible = reactive({
  detail: false,
  express: false
})
let loading = reactive({
  detail: false,
})

let form = ref({});

let expressForm = ref({
  orderId: null,
  express: '',
  deliverFormid: '',
});
const expressRules = {
  logisticsName: [
    { required: false, message: '请输入快递公司名称', trigger: 'blur' },
  ],
  deliverFormid: [
    { required: true, message: '请输入快递单号', trigger: 'blur' },
  ],
  express: [
    { required: true, message: '请选择快递公司', trigger: 'blur' },
  ],
}

function show (id) {
  visible.detail = true
  // this.orderId = id
  expressForm.value = {
    orderId: id,
    express: '',
    deliverFormid: '',
  }
  getProductList(id)
}
function getProductList (id) {
  loading.detail = true
  orderGetById({ orderId: id }).then(res => {
    form.value = res.data
  }).finally(() => {
    loading.detail = false
  })
}
function close () {
  visible.detail = false
}

let companyList = ref([]);
function getCompanyList () {
  orderGetSelect().then(res => {
    if (res.code === '') {
      companyList.value = res.data
    }
  })
}
function send () {
  getCompanyList()
  visible.express = true
}
function cancel () {
  visible.express = false
}

// 发货
function expressConfirm () {
  sendGoodsFormRef.value.validate((valid) => {
    if (valid) {
      expressForm.value.orderId = form.value.orderId
      orderDilevery(expressForm.value).then((res) => {
        if (res.code === '') {
          ElMessage.success('发货成功')
          visible.express = false
          emits('refresh')
          visible.detail = false
        }
      })
    }
  })
}

defineExpose({
  show,
  close
})

</script>

<style lang="scss" scoped>
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.order_details {
  h3 {
    // margin-left: 20px;
    margin: 20px 0 20px 20px;
    font-weight: 700;
  }
  .close {
    // float: right;
    position: absolute;
    right: 20px;
    &:hover {
      cursor: pointer;
    }
  }

  .cotent {
    margin: 20px;
    overflow: hidden;
    font-size: 14px;
    .goods_info,
    .order_info,
    .logistics_info,
    .pay_order_info,
    .take_goods_info {
      background: #fff;
      margin-bottom: 10px;
      padding: 10px 20px;
    }
    .pay_order_info,
    .take_goods_info {
      p {
        line-height: 30px;
      }
    }
    h2 {
      margin: 0;
      font-weight: 400;
      height: 40px;
      line-height: 40px;
      font-size: 18px;
      text-align: -10px;
    }
    .left_part {
      float: left;
      width: calc(70% - 10px);
      margin-right: 10px;
      .order_info {
        box-sizing: border-box;
        ul {
          padding: 10px 30px;
          li {
            overflow: hidden;
            p {
              width: 50%;
              float: left;
              font-size: 14px;
              line-height: 30px;
              span {
                &:nth-child(2) {
                  margin-left: 10px;
                }
              }
            }
          }
        }
        .remarks {
          margin-left: 30px !important;
        }
      }
      .goods_info {
        .goods_list {
          padding: 15px;
          .good_price {
            ul {
              li {
                &:nth-child(1) {
                  p {
                    width: 50%;
                    float: left;
                  }
                }
                p {
                  line-height: 30px;
                }
              }
            }
            border-bottom: 1px gray solid;
          }
          .good_details {
            ul {
              display: flex;
              margin-top: 20px;
              li {
                flex: 3;
                display: flex;
                justify-content: space-around;
                align-items: center;
                .details {
                  margin: 0 30px;
                  width: 180px;
                  line-height: 20px;
                  .skuDetails {
                    margin-top: 8px;
                    margin-bottom: 8px;
                    margin-right: 10px;
                    line-height: 1;
                    color: #9e9e9e;
                    .detail_span {
                      margin-right: 8px;
                    }
                  }
                }
                img {
                  width: 50px;
                  height: 50px;
                }
              }
            }
          }
        }
      }
      .logistics_info {
        .send_good {
          display: block;
          margin: 20px auto !important;
          &:hover {
            cursor: pointer;
          }
        }
        .logistics_content {
          padding: 0 10%;
          .logistics_title {
            span {
              margin: 20px 0;
              display: inline-block;
              width: 45%;
            }
          }
          .logistics_item {
            span {
              display: inline-block;
              width: 30%;
            }
          }
        }
      }
    }

    .right_part {
      float: left;
      width: 30%;
    }
  }
}
</style>
